<template>
  <div>
    <div class="addEntAuth">
      <header class="mint-header is-fixed">
        <div class="mint-header-button is-left">
          <button class="mint-button mint-button--default mint-button--normal">
            <span class="mint-button-icon">
              <i class="mintui mintui-back" @click="$router.go(-1)"></i>
            </span>
          </button>
        </div>
        <h1 class="mint-header-title">填写企业信息</h1>
        <div class="mint-header-button is-right">
          <button class="mint-button mint-button--default mint-button--normal">
            <label class="mint-button-text"></label>
          </button>
        </div>
      </header>
      <div class="field">
        <mt-cell title="会员名"></mt-cell>
        <mt-field placeholder="请输入会员名" v-model="userName"></mt-field>
        <label>会员名可用于登录账户，推荐使用企业中文名称，会员名称一旦设置成功，无法修改</label>
        <mt-cell title="企业名称"></mt-cell>
        <mt-field placeholder="请输入企业名称" v-model="authEName"></mt-field>
        <mt-cell title="营业执照注册号"></mt-cell>
        <mt-field placeholder="请输入营业执照上的注册号" v-model="authELicenseCode"></mt-field>
        <mt-cell title="企业营业地址"></mt-cell>
        <div class="cell-from-item" @click="()=>addressVisible=true" style="justify-content:space-between;">
          <div class="content">
            <input class="area-select" type="text" disabled :value="authProvinceName + authCityName + authAreaName" placeholder="选择区域">
          </div>
          <i class="arrow-right" style="width: 10px;height: 15px;opacity: .4"></i>
        </div>
        <mt-field placeholder="输入详细地址" type="textarea" rows="4" v-model="authEAddress"></mt-field>
        <mt-cell title="营业执照图片"></mt-cell>
        <div class="upload">
          <div class="image-list">
            <div style="text-align:center" ref="divGenres" class="list-default-img" v-show="isPhoto" @click.stop="addPic">
              <img src="./../../assets/common/images/camera.png" />
              <br>
              <span>请选择或者拍照上传照片</span>
              <input type="file" accept="image/jpg,image/png,image/jpeg,image/gif" @change="onFileChange" style="display: none;">
            </div>
            <ul class="list-ul" v-show="!isPhoto">
              <li class="list-li " v-for="(iu, index) in imgUrls">
                <a class="list-link" @click='previewImage(iu)'>
                  <img :src="iu">
                </a>
                <span class="list-img-close" @click='delImage(index)'></span>
              </li>
              <!--<li class="list-li" v-if="isAdd">
                            <span class="add-img" @click.stop="addPic"> </span>
                          </li>-->
            </ul>
          </div>
        </div>
        <label>只支持中国大陆工商局或市场监督管理局颁发的工商营业执照，且必须在有效期内。格式要求：原件图片，扫描件或者加盖公章的复印件，支持jpg,jpeg,bmp,gif,png格式照片，大小不超过5M。</label>
        <mt-cell title="手机验证码"></mt-cell>
        <mt-field v-model="code" placeholder="输入验证码">
          <span @click="obtain">获取验证码</span>
        </mt-field>
        <div style="width:100%;text-align: center;margin-top:50px;">
          <button class="submit" @click="submit">提交</button>
        </div>
      </div>
      <mt-popup v-model="addressVisible" position="bottom" class="address-pricker">
        <div class="address-picker-header">
          <p>所在地区</p>
          <span class="picker-close" @click="()=>addressVisible=false">&times;</span>
        </div>
        <v-distpicker :placeholders="{ province: '请选择', city: '请选择', area: '请选择' }" wrapper="address-pricker-wrapper" type="mobile" @selected="onSelected"></v-distpicker>
      </mt-popup>
    </div>
  </div>
</template>
<script>
import {
  mapGetters
} from 'vuex'
import {
  addEntAuth,
  updateEntAuthInfo,
  sendPhoneCode
} from '@/api/user'
import {
  upload
} from '@/api/shop'
import VDistpicker from '@/plugins/v-distpicker/src'
import { Toast } from 'mint-ui'
import lrz from 'lrz'
export default {
  data() {
    return {
      userName: '',
      code: '',
      authEName: '',
      authELicenseCode: '',
      authProvinceName: '',
      authCityName: '',
      authAreaName: '',
      authEAddress: '',
      authLicenseImage: '',
      addressVisible: false,
      imgUrls: [],
      urlArr: [],
      isPhoto: true,
      isAdd: true,
      fileArr: []
    }
  },
  watch: {
    imgUrls: 'toggleAddPic'
  },
  components: {
    VDistpicker
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  created() {
  },
  methods: {
    submit() {
      this.isLogin = this.userInfo ? 1 : 0
      if (!this.userInfo) return
      const form = {
        userId: this.userInfo.id,
        userName: encodeURI(this.userName),
        code: this.code,
        authEName: encodeURI(this.authEName),
        authELicenseCode: this.authELicenseCode,
        authProvinceName: encodeURI(this.authProvinceName),
        authCityName: encodeURI(this.authCityName),
        authAreaName: encodeURI(this.authAreaName),
        authEAddress: encodeURI(this.authEAddress),
        authLicenseImage: this.authLicenseImage
      }
      const formData = new FormData()
      for (var i = 0; i < this.fileArr.length; i++) {
        formData.append('file', this.fileArr[i])
      }
      const param = { 'type': 'license' }
      upload(formData, param).then(res => {
        this.authLicenseImage = res.data.url
        form.authLicenseImage = res.data.url
        if (this.$route.query.authStatus) {
          updateEntAuthInfo(form).then(res => {
            this.$router.replace({
              name: 'checkEntAuth'
            })
          }).catch(err => {
            Toast(err.info)
          })
        } else {
          addEntAuth(form).then(res => {
            this.$router.replace({
              name: 'checkEntAuth'
            })
          }).catch(err => {
            Toast(err.info)
          })
        }
      }).catch(err => {
        console.log(err.info)
        Toast('请上传图片')
      })
    },
    obtain() {
      sendPhoneCode({ 'tel': this.userInfo.userAccount, 'fal': false }).then(res => {
        Toast('验证码已发送')
      }).catch(err => {
        Toast(err.info)
      })
    },
    onSelected(data) {
      this.addressVisible = false
      this.authProvinceName = data.province.value
      this.authCityName = data.city.value
      this.authAreaName = data.area.value
    },
    toggleAddPic: function() {
      const vm = this
      if (vm.imgUrls.length >= 1) {
        vm.isPhoto = false
        if (vm.imgUrls.length >= 5) {
          vm.isAdd = false
        } else {
          vm.isAdd = true
        }
      } else {
        vm.isPhoto = true
      }
    },
    addPic: function(e) {
      const els = this.$refs.divGenres.querySelectorAll('input[type=file]')
      els[0].click()
      return false
    },
    onFileChange: function(e) {
      var files = e.target.files || e.dataTransfer.files
      if (!files.length) return
      this.createImage(files, e)
    },
    createImage: function(file, e) {
      const vm = this
      lrz(file[0], {
        width: 480
      }).then(function(rst) {
        vm.imgUrls.push(rst.base64)
        vm.fileArr.push(rst.origin)
        return rst
      }).always(function() {
        // 清空文件上传控件的值
        e.target.value = null
      })
    },
    delImage: function(index) {
      const vm = this
      vm.imgUrls.splice(index, 1)
    },
    previewImage: function(url) {
      const vm = this
      vm.isPreview = true
      vm.previewImg = url
    }
  }
}

</script>
<style lang="scss">
@import '~assets/common/css/mixin.scss';

.addEntAuth {
  min-height: 100vh;
  margin-top: 40px;
  .mint-header {
    background-color: #FFF;
    color: #000;
    z-index: 2;
    font-size: 16px;
  }
  .field {
    padding-bottom: 100px;
    .mint-cell {
      .mint-cell-wrapper {
        border: none;
      }
      .mint-cell-title {
        font-size: 14px;
      }
      .mint-field-core {
        font-size: 14px;
      }
      .mint-field-other span {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        background: #333333;
        color: #fff;
        border-radius: 15px;
        padding: 0 10px;
      }
    }
    label {
      color: #868686;
      font-size: 12px;
      padding: 15px 10px;
      display: inline-block;
      background-color: #FCFCFC;
    }
    .cell-from-item {
      @include flexbox(flex-start,
      center,
      row,
      nowrap);
      padding: $padding; // border-top: 1px solid #eee;
      background-color: #ffffff;
      .title {
        font-size: $subtitle;
        color: #333;
        white-space: nowrap;
      }
      .content {
        width: 100%;
        @include placeholderColor($gray);
        input {
          width: 100%;
          border: none;
          outline: none;
          box-shadow: none;
          text-shadow: none;
          text-align: left;
          font-size: $subtitle;
          color: #333;
          line-height: 24px;
        }
        .area-select {
          pointer-events: none;
          &:disabled {
            background-color: #ffffff;
          }
        }
        .arrow-right {
          background-size: auto 100%;
        }
      }
      &.switch {
        justify-content: space-between;
      }
    }
    .upload {
      // height: 150px;
      overflow: hidden;
      background-color: #fff;
      padding: 15px;
    }
    .list-ul {
      list-style: none;
      /* 去掉ul前面的符号 */
      margin: 0px;
      /* 与外界元素的距离为0 */
      padding: 0px;
      /* 与内部元素的距离为0 */
      width: auto;
      /* 宽度根据元素内容调整 */
      overflow: hidden;
    }
    /* 所有class为menu的div中的ul中的li样式 */
    .list-li {
      float: left;
      margin-right: 15px;
      margin-top: 15px;
      /* 向左漂移，将竖排变为横排 */
      // padding: 8px;
      overflow: hidden;
      /* 与内部元素的距离为0 */
      display: inline-block;
      position: relative;
      text-align: center;
    }
    .list-link {
      overflow: hidden;
      height: 100px;
      width: 100px;
      display: table-cell;
      text-align: center;
    }
    .list-link img {
      height: 100px;
    }
    /* 所有class为menu的div中的ul中的a样式(包括尚未点击的和点击过的样式) */
    .list-link a:visited {
      background-color: #465c71;
      /* 背景色 */
      border: 1px #4e667d solid;
      /* 边框 */
      color: #dde4ec;
      /* 文字颜色 */
      display: flex;
      /* 此元素将显示为块级元素，此元素前后会带有换行符 */
      line-height: 1.35em;
      /* 行高 */
      padding: 4px 20px;
      /* 内部填充的距离 */
      text-decoration: none;
      /* 不显示超链接下划线 */
      white-space: nowrap;
      /* 对于文本内的空白处，不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */
      overflow: hidden;
    }
    /* 所有class为menu的div中的ul中的a样式(鼠标移动到元素中的样式) */
    .list-link a:hover {
      background-color: #bfcbd6;
      /* 背景色 */
      color: #465c71;
      /* 文字颜色 */
      text-decoration: none;
      /* 不显示超链接下划线 */
    }
    /* 所有class为menu的div中的ul中的a样式(鼠标点击元素时的样式) */
    .list-link a:active {
      background-color: #465c71;
      /* 背景色 */
      color: #cfdbe6;
      /* 文字颜色 */
      text-decoration: none;
      /* 不显示超链接下划线 */
    }

    .list-img-close {
      background: #ffffff url('./../../assets/common/images/delete.svg') no-repeat right top;
      border-color: #ff4a00;
      background-position: center;
      background-size: 20px 20px;
      display: block;
      float: left;
      width: 20px;
      height: 20px;
      position: absolute;
      top: 0;
      left: 0;
      margin-top: 0px;
      margin-left: 0px;
      padding: 8px;
      z-index: 10;
      border-radius: 5px;
      text-align: center;
    }

    .add-img {
      display: block;
      background-image: url('./../../assets/common/images/add.svg');
      background-repeat: no-repeat;
      width: 100px;
      height: 100px;
      background-position: center;
      background-size: 100px 100px;
    }
    .submit {
      width: 90%;
      height: 45px;
      line-height: 45px;
      text-align: center;
      background: #ff6600;
      border-radius: 5px;
      color: #fff;
      font-size: 14px;
    }
  }
  .address-pricker {
    @include wh(100%,
    50%);
    .address-picker-header {
      position: relative;
      p {
        padding: $padding 0;
        font-size: 15px;
        color: #333;
        text-align: center;
      }
      .picker-close {
        position: absolute;
        right: 10px;
        bottom: 7px;
        font-weight: normal;
        font-size: 25px;
        color: #999;
        opacity: .7;
      }
    }
  }
}
</style>
